<template>
  <div>
    <div style="float: left;margin-top: 25px;margin-left: 10px;">
          <div>
            时间段：<span style="color: red;">{{ startTime }}——{{ endTime }}</span>
          </div>
    </div>
    <div style="float: left;margin-top: 20px;margin-left: 20px;">
        视频码流：<span ><el-select v-model="PlayDistinctLabel" filterable placeholder="视频码流" @change="PlayDistinctEvnt" style="width:100px ;" >
                        <el-option
                            v-for="item in PlayDistinctList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                            />
                     </el-select>
          </span>
      </div>
      <div style="float: left;margin-top: 20px;margin-left: 20px;">
             <el-button  class="loads" @click="visible = true" style="background-color: #01B2C5;color:#fff;">提取视频</el-button>
             <el-dialog v-model="visible" :show-close="true">
                <template #header="{close,titleId, titleClass }">
                  <div class="my-header">
                    <h4 :id="titleId" :class="titleClass" style="color: #ffffff;">提取视频</h4>
                    <div style="color: red;margin-top: 10px;">所下载视频时长需小于 10 分钟</div>
                  </div>
                  <div >
                      <div style="margin-top: 30px;">选中车辆:<span style="margin-left: 20px;">{{ clientId }}</span></div>
                      <div style="margin-top: 10px;">
                        <el-form-item label="选中通道:" style="color: #fff;">
                            <el-checkbox-group v-model="type">
                              <el-checkbox-button label="通道一" name="type"  />
                              <el-checkbox-button label="通道二" name="type" />
                              <el-checkbox-button label="通道三" name="type" />
                              <el-checkbox-button label="通道四" name="type" />
                            </el-checkbox-group>
                          </el-form-item>
                      </div>
                      <div style="margin-top: 10px;">视频码流：
                        <el-select v-model="DownDistinctLabel" filterable placeholder="视频码流" @change="DownDistinctEvnts" style="width:100px ;" >
                        <el-option
                            v-for="item in DownDistinctList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                            />
                     </el-select>
                      </div>
                     <div style="margin-top: 10px;">
                      日期选择： <el-date-picker v-model="DownDate" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    @change="getDownDate" style="width: 130px;">
                                </el-date-picker>
                     </div>
                     <div style="margin-top: 10px;">时间段:
                      <el-time-picker
                          v-model="DownTime"
                          is-range
                          arrow-control
                          range-separator="To"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        style="width: 213px;"/>
                    </div>
                     
                      <div style="margin-top: 30px;">
                            <div class="el-nook"> <el-button type="danger" round @click="close">取消</el-button></div>
                            <div class="el-ok"> <el-button type="primary" round @click="setUploadFile">确认</el-button></div>
                      </div>
                      </div>
                </template>
              </el-dialog>
      </div>
    <div>
      <span style="font-size: 8px;float: right;margin-right: 70px;margin-top: 30px;">
           <div style="background-color: #276a42;width: 20px;height: 20px;float: left;margin-right: 10px;"></div>有视频
      </span>
      <span style="font-size: 5px;float: right;margin-right: 50px;margin-top: 30px;">
           <div style="background-color: #283032;width: 20px;height: 20px;float: left;margin-right: 10px;"></div>无视频
      </span>
    </div>
    <div class="AxisData">
        <div class="timeData" v-for="(item, index) in list" :key="index">
            <div class="item" :style="{ left: item.left, width: item.width }"></div>
        </div>
        <el-slider class="self_slider" v-model="value1" :max="86400" :min="0" range :step="1" @change="onchange($event)"
          :format-tooltip="formatTooltip" />
    </div>
    <div v-for="(item, index) in timelist" style="float: left;color: aliceblue;">
        <div style="width: 1px;height: 3px;background-color: aliceblue;margin-left: 10px;margin-top: 20px;"></div>
        <span style="font-size: 16px;padding-right: 36px;">{{ item }}</span>
    </div>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus';
import api from "@/api/api";
export default {
  props: ["clientIdAndPlayDate"],
  name: 'TimeLine',
  data: function () {
    return {
      //进度条的值
      value1: [0, 0],
      //时间轴的24小时
      timelist: [],
      //初始化
      startTime: "00:00:00",
      endTime: "00:00:00",
      list: [{
        width: 0,
        left: 0
      }],
      //时间轴选择新的值之前，老的值
      old: [-1, -1],
     
      //播放的主子码流选择
      PlayDistinctValue: 2,
      PlayDistinctLabel:"子码流",
      PlayDistinctList:[
        {label:"子码流",value:2},
        {label:"主码流",value:1}
      ],
      //下载的主子码流选择
      DownDistinctValue: 2,
      DownDistinctLabel:"子码流",
      DownDistinctList:[
        {label:"子码流",value:2},
        {label:"主码流",value:1}
      ],
      //下载日期
      DownDate:"",
      //下载视频时间
      DownTime:[],
      //提取视频的弹窗现实开关
      visible:false,
      //选择视频通道
      type:[],
      clientId: "",
      PlayDate:""
    }
  },
  //监听值的变化
  watch: {
    clientIdAndPlayDate() {
      this.rest();
    }
  },
  //传给父组件
  emits: ["time","PlayDate"],
  mounted() {
    //生成下面的24小时
    this.generateTimes();
   
  },
  methods: {
    rest(){
      this.list = [{
        width: 0,
        left: 0
      }];
      this.value1 = [0, 0]
      this.old = [-1, -1]
      this.startTime = "00:00:00";
      this.endTime = "00:00:00";
      this.clientId=this.clientIdAndPlayDate[0];
      this.PlayDate=this.clientIdAndPlayDate[1];
      this.playTime();
      
    },
    //获取播放时间
    playTime() {
      if(this.clientId==""){
        ElNotification({ title: 'Error', message: '请选择终端设备号', type: 'error', })
      }
      console.log(this.PlayDate)
      var dates = (this.PlayDate + "").replaceAll("-", "").slice(2)
      api.selectBackTime(this.clientId, 1, dates + "000000", dates + "235959", 0, 0, 0, 0, 0).then(res => {
        if (res.code == 0) {
          if (res.data.count == 0) {
            ElNotification({ title: 'Error', message: '选中时间段暂无视频回放', type: 'error', })
          } else {
            for (var i = 0; i < res.data.count; i++) {
              var s = res.data.items[i].startTime.slice(10)
              var e = res.data.items[i].endTime.slice(10)
              var ss = this.times(s)
              var es = this.times(e)
              var width = (es - ss) / 864;
              var left = (ss / 864);
              this.list.push({
                width: width + "%",
                left: left + "%"
              })
            }
          }
        }else if (res.code == 1){
          ElNotification({ title: "警告", message: res.msg, type: 'error', })
        }
      }).catch(err => {
        console.log(err)
      })

    },
    //24小时
    generateTimes() {
      let timeArrays = new Array(24).fill("");
      timeArrays.forEach((item, index) => timeArrays[index] = (index < 10 ? '0' + index : index) + ':00');
      this.timelist = timeArrays;
    },
    //进度条拖拽事件
    onchange(val) {
      const customClassbar = document.getElementsByClassName('el-slider__bar')
      const customClasswrapper = document.getElementsByClassName('el-slider__button-wrapper')
      if (this.old[0] == -1 && this.old[1] == -1) {
        this.old = val;
        if (val[1] - val[0] > 1200) {
          var left = (val[1] / 864);
          val[0] = val[1] - 1200;
          customClassbar[0].style.width = (1200 / 864) + "%";
          customClassbar[0].style.left = (left - (1200 / 864)) + "%";
          customClasswrapper[0].style.left = (left - (1200 / 864)) + "%";
          this.value1[1] = val[1]
          this.value1[0] = val[0]
        }
      } else {
        if (this.old[1] < val[1]) {
          if (val[1] - val[0] > 1200) {
            var left = (val[1] / 864);
            val[0] = val[1] - 1200;
            customClassbar[0].style.width = (1200 / 864) + "%";
            customClassbar[0].style.left = (left - (1200 / 864)) + "%";
            customClasswrapper[0].style.left = (left - (1200 / 864)) + "%";
            this.value1[1] = val[1]
            this.value1[0] = val[0]
          }
        } else {
          if (val[1] - val[0] > 1200) {
            var left = (val[0] / 864);
            val[1] = val[0] + 1200;
            customClassbar[0].style.width = (1200 / 864) + "%";
            customClassbar[0].style.left = (left + (1200 / 864)) + "%";
            customClasswrapper[1].style.left = (left + (1200 / 864)) + "%";
            this.value1[1] = val[1]
            this.value1[0] = val[0]
          }
        }
      }
      this.old = val;
      this.startTime = this.formatTooltip(val[0])
      this.endTime = this.formatTooltip(val[1])
      // }
      this.$emit('time', [this.PlayDate + " " + this.startTime, this.PlayDate + " " + this.endTime,this.PlayDistinctValue]);
    },
   
    //时间转成秒
    times(val) {
      let [hours, minutes, seconds] = val.split(':');
      let totalSeconds = (+hours) * 60 * 60 + (+minutes) * 60 + (+seconds);
      return totalSeconds;
    },
    //秒转化为时间
    formatTooltip(val) {
      let h = parseInt(val / 60 / 60 % 24)
      let m = parseInt(val / 60 % 60)
      let s = parseInt(val % 60)
      // 因为h已经是数字型了，如果0不加引号就变成加法了
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      let time = h + ':' + m + ":" + s
      return time
    },

    //下载日期
    getDownDate(val){
      this.DownDate=val;
    },
    //播放主码流和子码流切换
    PlayDistinctEvnt(val){
      this.PlayDistinctValue=val;
      if (this.startTime!=this.endTime) {
        this.$emit('time', [this.PlayDate + " " + this.startTime, this.PlayDate + " " + this.endTime,this.PlayDistinctValue]);
      }
    },
    //获取下载时间hhmmss
    formatDownTime(value) {
      const hours = value.getHours().toString().padStart(2, '0');
      const minutes = value.getMinutes().toString().padStart(2, '0');
      const seconds = value.getSeconds().toString().padStart(2, '0');
      return `${hours}${minutes}${seconds}`;
    },
    //获取下载主子码流
    DownDistinctEvnts(val){
      this.DownDistinctValue=val;
    },
    //获取下载选中通道
    getchannelNo(val){
        switch(val){
          case '通道一':
            return 1;
          case '通道二':
            return 2;
          case '通道三':
            return 3;
          case '通道四':
            return 4;
        }
    },
    //下发提取视频命令
    setUploadFile(){
      var path="/"+this.clientId;
      var start=this.formatDownTime(this.DownTime[0])
      var end=this.formatDownTime(this.DownTime[1])
      var date=this.DownDate.replace(/-/g, '').slice(2)
      var startTime=date+start;
      var endTime=date+end;
        for(let i=0;i<this.type.length;i++){
          console.log(this.getchannelNo(this.type[i]))
          api.setUploadFile(this.clientId,path,this.getchannelNo(this.type[i]),startTime,endTime,
                            0,0,0,this.DownDistinctValue,0,2 ).then(res=>{
                              console.log(res)
                              if(res.code==0){
                                ElNotification({ title: '成功', message: '提取成功', type: 'success', })  
                              }else{
                                ElNotification({ title: '错误', message: '提取失败', type: 'error', })
                              }
                            })
                            this.visible=false;
        }
     
    }
  },
}

</script>

<style scoped>
:deep(.el-date-editor .el-range-input){
  color: #fff;
}
.circle-checkbox .el-checkbox-button__inner {
  border-radius: 50%;
}
:deep(.el-form-item__label){
  color: #fff;
}
:deep(.el-checkbox-button){
  padding: 5px 0px 0px 5px;
}
.el-nook{
  float: left;
  margin-left: 30px;
}
.el-ok{
  float: left;
  margin-left: 100px;
}
.titleClass{
  margin-top: 10px;
}
:deep(.el-dialog){
  --el-dialog-width:18%;
  --el-dialog-bg-color: #283032;
}
.my-header{
   text-align: center;
}
.AxisData {
  background-color: #111010;

  margin-left: 10px;
  margin-right: 10px;
}

.timeData {
  position: absolute;
  height: 40px;
  width: 96.6%;
  margin-top: 72px;
  z-index: 2;
}

.item {
  background-color: #276a42;
  height: 40px;
  z-index: 2;
  position: absolute;
}

.self_slider {
  width: 99.8%;
  height: 40px;
  background-color: #111010;
  position: relative;
}

:deep(.el-slider) {
  --el-slider-main-bg-color: #276a42;
}

:deep(.el-slider__runway) {
  height: 40px;
  margin-top: 40px;
  background-color: #283032;

}

:deep(.el-slider__bar) {

  height: 40px;
}

:deep(.el-slider__button-wrapper) {
  margin-top: 19px;
  border: none;

}

:deep(.el-slider__marks) {
  margin-top: 40px;
}

/* :deep(.el-slider__stop) {
  background-color: transparent;
} */

:deep(.el-slider__bar) {
  background: rgba(255, 0, 0, 0.315);
  z-index: 10;
  width: 100px;
  border-left: 2px solid red;
  border-right: 2px solid red;
}


:deep(.el-slider__button) {
  height: 0px;
  width: 0px;
  border: none;

}

:deep(.el-slider__button:hover ){
  background-color: #66B1FF;
  border-color: #66B1FF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 设置滑块轴的悬停效果 */
</style>
